<template>
    <div class="summarybox">
        <div class="ditem" v-for="(item, index) in dlist" :key="item" @click="$emit('change', index + 1)">
            {{ index + 1 }}.{{ item }}
        </div>
    </div>
</template>

<script setup lang='ts'>
const dlist = ['审线小结', '基本情况', '产线基本设置', '产线调整建议', '产品推荐', '工艺维护建议']
</script>

<style lang="scss" scoped>
.summarybox {
    height: 490px;
    align-self: flex-start;
    margin-left: 50px;

    .ditem {
        width: 434px;
        height: 61px;
        font-family: 'DOUYUfont';
        font-size: 1.78rem;
        color: #ffffff;
        line-height: 70px;
        padding-left: 44px;
        border-radius: 50px;
        text-align: left;
        margin-bottom: 30px;
        letter-spacing: 2px;
    }

    .ditem:nth-child(1) {
        background: #64A7F6;
        margin-top: 40px;
    }

    .ditem:nth-child(2) {
        background: #66A2F8;
    }

    .ditem:nth-child(3) {
        background: #689EF8;
    }

    .ditem:nth-child(4) {
        background: #699AF7;
    }

    .ditem:nth-child(5) {
        background: #6B92F7;
    }

    .ditem:nth-child(6) {
        background: #6E8FF8;
        margin-bottom: 0;
    }
}
</style>